import { AreaChartOutlined } from '@ant-design/icons'
import { Alert, Card, Space } from 'antd'
import React, { useEffect, useState } from 'react'
import { request } from '../../../api/request'

const RankList: React.FC = () => {
  const [rankData, setRankData] = useState({} as any)

  useEffect(() => {
    request.get({ url: '/dashboard/rankList' }).then((res) => {
      if (res.data !== null && res.data.length > 0) {
        setRankData(res.data[0])
      }
    })
  }, [])

  return (
    <Card
      title='BBooks平台风云榜'
      extra={
        <AreaChartOutlined style={{ fontSize: '200%', color: '#eb2f96' }} />
      }
      style={{ width: 350, height: 360 }}
    >
      <Space size={10} direction='vertical' style={{ width: '100%' }}>
        <Alert
          message={`销量最多的商家：${rankData?.maxNumUser?.username}(${rankData?.maxNumUser?.num}件)`}
          type='success'
        />
        <Alert
          message={`销量最多的种类：${rankData?.maxGoodsType?.title}(${rankData?.maxGoodsType?.num}件)`}
        />
        <Alert
          message={`总销售额最多的商家：${rankData?.maxMoneyUser?.username}(${rankData?.maxMoneyUser?.num}元)`}
          type='warning'
        />
        <Alert
          message={`销售最多的商品：${rankData?.maxNumGoods?.name}(${rankData?.maxNumGoods?.num}件)`}
          type='error'
        />
        <Alert
          message={`评论最多的商品：${rankData?.maxEvaGoods?.name}(${rankData?.maxEvaGoods?.num}条)`}
          type='info'
        />
      </Space>
    </Card>
  )
}

export default RankList
